<template>
  <div
    :class="
      (payPrice < info.minPrice && isShowReasion) ||
      info.status === 20 ||
      (payPrice <= info.value && isShowReasion) ||
      (info.status === 10 && isPast)
        ? 'cash-coupon-item  past-cash-coupon-item'
        : 'cash-coupon-item'
    "
    @click="onInfoClick"
  >
    <div class="top">
      <div class="left">
        <div>
          <span>￥</span>
          <span class="amount">{{ integer }}</span>
          <span>.</span>
          <span>{{ decimals }}</span>
        </div>
        <span>{{
          info.minPrice > 0 ? "超过" + info.minPrice / 100 + "可用" : "无门槛"
        }}</span>
      </div>
      <div class="right" v-if="!isShowReasion">
        {{ info.expirationTime }}到期
      </div>
      <div class="right" v-if="isShowReasion">
        本单限1张,{{ info.expirationTime }}到期
      </div>
      <div
        class="past-content"
        v-if="
          (info.status === 20 || (info.status === 10 && isPast)) &&
          !isShowReasion
        "
      >
        <span v-if="info.status === 20">已用</span>
        <span v-if="info.status === 10 && isPast">过期</span>
      </div>
    </div>
    <div
      class="bottom"
      v-if="
        isShowReasion &&
        (payPrice < info.minPrice ||
          info.status === 20 ||
          (info.status === 10 && isPast) ||
          payPrice <= info.value)
      "
    >
      <span>不可用原因：</span>
      <span v-if="payPrice <= info.minPrice && !isPast && info.status === 10"
        >未达使用门槛</span
      >
      <span
        v-if="
          payPrice <= info.value &&
          !isPast &&
          info.status === 10 &&
          payPrice > info.minPrice
        "
        >优惠券金额超出订单金额</span
      >
      <span v-if="info.status === 10 && isPast">已过期</span>
      <span v-if="info.status === 20">已用</span>
    </div>
  </div>
</template>


<script>
import { Button } from "vant";
export default {
  name: "BoxCashCouponItem",
  components: {
    [Button.name]: Button,
  },
  props: {
    isLink: {
      type: Boolean,
      default: false,
    },
    showBottomImg: {
      type: Boolean,
      default: false,
    },
    showEdmit: {
      type: Boolean,
      default: false,
    },
    cashCouponInfo: {
      type: Object,
      default: {},
    },
    isShowReasion: {
      type: Boolean,
      default: false,
    },
    //  产品应支付价格
    payPrice: {
      type: Number,
      default: 0,
    },
  },
  watch: {
    cashCouponInfo: {
      deep: true,
      handler: function (newVal) {
        this.info = newVal;
        this.generateShowInfo(this.info.value);
      },
    },
  },
  computed: {
    isPast: function () {
      if (this.info.expirationTime) {
        let infoTime = this.info.expirationTime.replace(/-/g, "/");
        if (new Date(infoTime) > new Date()) {
          return false;
        }
        return true;
      }
      return false;
    },
  },
  data() {
    return {
      info: {},
      integer: "",
      decimals: "",
    };
  },
  computed: {
    isPast: function () {
      if (this.info.expirationTime) {
        let infoTime = this.info.expirationTime.replace(/-/g, "/");
        if (new Date(infoTime) > new Date()) {
          return false;
        }
        return true;
      }
      return false;
    },
  },
  created() {
    this.info = this.cashCouponInfo;
    this.generateShowInfo(this.info.value);
  },
  methods: {
    generateShowInfo(value) {
      if (value) {
        let tempValue = (value / 100).toFixed(2).toString().split(".");
        if (tempValue[0]) {
          this.integer = tempValue[0];
        }
        if (tempValue[1]) {
          this.decimals = tempValue[1];
        }
      }
    },
    onInfoClick() {
      this.$emit("onInfoClick", this.info);
    },
  },
};
</script>

<style scoped lang="less">
.cash-coupon-item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  height: auto;
  padding: 0 80px 0 43px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  background: url("http://alivod.sdxgxx.cn/image/default/7B5074F006A34241A1981EE4377753DB-6-2.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  .top {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    padding: 24px 0;
  }
  .left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    div {
      margin-bottom: 10px;
      span {
        font-size: 30px;
        font-weight: 500;
        color: #222222;
        display: inline-block;
      }
      span:first-child {
        font-weight: 600;
      }
      span.amount {
        font-size: 60px;
        font-weight: 600;
        color: #222222;
        line-height: 50px;
      }
    }
    > span {
      font-size: 24px;
      color: #555555;
      line-height: 33px;
    }
  }
  .right {
    font-size: 22px;
    color: #888888;
    line-height: 30px;
    margin-left: 62px;
  }
  .past-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -20px;
    right: -20px;
    width: 136px;
    height: 136px;
    background-color: none;
    border-radius: 50%;
    border: 2px solid #8e8e8e;
    span {
      font-size: 42px;
      font-weight: bold;
      color: #8f8f8f;
      -moz-transform: rotate(-30deg);
      -webkit-transform: rotate(-30deg);
      display: block;
      position: absolute;
      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    }
  }
  .past-content:after {
    content: "";
    display: block;
    width: 124px;
    height: 124px;
    border-radius: 50%;
    background-color: none;
    position: relative;
    top: 0px;
    left: 0px;
    right: 0;
    bottom: 0;
    margin: auto;
    border: 2px solid #8e8e8e;
  }
  .bottom {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: auto;
    padding: 20px 0;
    border-top: 1px dashed#979797;
    span {
      font-size: 24px;
      line-height: 33px;
    }
    span:first-child {
      color: #3b6bd8;
    }
    span:nth-child(2) {
      color: #555555;
    }
  }
}

.cash-coupon-item.past-cash-coupon-item {
  opacity: 0.59;
}
</style>
